<template>
	<view class="container">
		<view class="header">
			<view class="subsection">
				<u-subsection active-color="#20cbd4" mode="subsection" :list="list" :current="current"
					@change="sectionChange"></u-subsection>
			</view>
		</view>

		<view class="giftList">
			<view v-for="item in orderList" :key="item.id">
				<giftItem v-if="current===0" :item="item" @share="showShare"></giftItem>
				<myGiftItem v-else :item="item" @express="showExpress"></myGiftItem>
			</view>
		</view>

		<u-popup v-model="show" mode="bottom">
			<button open-type="share" style="background-color: #FFFFFF;line-height: 50rpx;">
				<image class="weixin" src="/static/image/wex.png"></image>
				<view class="wexin-text">微信</view>
			</button>
		</u-popup>

		<u-popup v-model="expressShow" mode="center" border-radius="14" width="80%" height="80%" closeable="true">
			<view class="box">
				<empty v-if="isEmpty" :emptyImg="emptyImg" :emptyTxt="emptyTxt"></empty>
				<u-time-line v-else>
					<u-time-line-item nodeTop="2" v-for="(item, index) in expressList">
						<template v-slot:node>
							<view class="u-node" style="background: #20cbd4;">
								<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view>
								<view v-if="index>0" class="u-order-title"></view>
								<view v-else class="u-order-title1"></view>
								<view class="u-order-desc">{{item.AcceptTime}}</view>
								<view class="u-order-time">{{item.AcceptStation}}</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		sendList,
		receiveList
	} from "@/common/api.js";
	import giftItem from './components/giftItem.vue';
	import myGiftItem from './components/myGiftItem.vue';
	export default {
		components: {
			giftItem,
			myGiftItem
		},
		data() {
			return {
				show: false,
				expressShow: false,
				isEmpty: false,
				emptyImg: getApp().globalData.imageUrl + "empty_goods.png",
				emptyTxt: "暂无物流详细信息～",
				list: [{
						name: '我送出的'
					},
					{
						name: '我收到的'
					}
				],
				msg: '',
				gift_no: '',
				spread_code: '',
				orderList: [],
				current: 0
			}
		},
		onLoad(option) {},
		onShow() {
			if (this.current == 0) {
				this.orderList = []
				this.sendList()
			} else {
				this.orderList = []
				this.receiveList()
			}
		},
		onShareAppMessage(res) {
			let gift_no = this.gift_no
			let app = this
			let spread_code = this.spread_code
			let title = this.msg
			return {
				title: title,
				path: `/goods/gift?gift_no=${gift_no}&spread_code=${spread_code}`,
				imageUrl: "https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/1.jpg",
				success(res) {},
				fail(res) {}
			}
		},
		methods: {
			showShare(item) {
				this.gift_no = item.gift_no
				this.msg = item.msg
				this.show = true
			},
			showExpress(item) {
				uni.navigateTo({
					url: "/user/logistics?order_id=" + item.orders.order_id + "&type=0"
				})
			},
			sectionChange(e) {
				this.current = e
				if (e == 0) {
					this.orderList = []
					this.sendList()
				} else {
					this.orderList = []
					this.receiveList()
				}
			},
			sendList() {
				sendList(this, {
					page: 1,
					limit: 10
				})
			},
			receiveList() {
				receiveList(this, {
					page: 1,
					limit: 10
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		min-height: 100%;
		height: 100%;
	}

	.container {
		min-height: 100%;
		background-color: #efefef;
	}

	.weixin {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		margin-top: 30rpx;
	}

	.wexin-text {
		width: 100%;
		float: left;
		text-align: center;
		margin-bottom: 30rpx;
		font-size: 30rpx;
		color: #666;
	}

	.header {
		background-color: #ffffff;
		padding: 10rpx 0;
	}

	.subsection {
		width: 400rpx;
		margin: 10rpx auto;
	}

	.giftList {
		background-color: #ffffff;
	}
</style>
